<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改密码</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
<script type="text/javascript" src="../../../layui/lay/modules/layer.js"></script>
<script type="text/javascript" src="../../../layui/jquery-3.2.1.min.js"></script>
<script src="../../../layui/layui.js" charset="utf-8"></script>
<!-- JQuery 的遮罩层 -->
	<style type="text/css">     
    .mask {       
            position: absolute; top: 0px; filter: alpha(opacity=60); 
            z-index: 1002; left: 0px;              
			background:url(../../layui/layui/img/jz.gif) no-repeat center rgba(0,0,0,0.5) ;
		  	background-size:30px 30px;
			background-repeat: no-repeat;
			background: 
        } 
        body{
		background-size:100%,100%;
		overflow:hidden;
	}
		body{
		background-size:100%,100%;
		overflow:hidden;
	}
	.vali_pass {
  width: 350px;
  margin: 0 auto;
  padding: 10px;
  border: #eee 1px solid;
  text-align: center;
}
.vali_pass input {
  width: 96%;
  display: block;
  margin: 0;
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
}
.vali_pass_progress {
  margin-top: 10px;
  background-color: #efefef;
  height: 10px;
  border-radius: 5px;
}
.vali_pass_inner_progress {
  display: block;
  height: 100%;
  background-color: transparent;
  border-radius: 5px;
  width: 100%;
}
.error {
 background-color: #ff3300;
}
.middle {
 background-color: gold;
}
.strong {
 background-color: green;
}
.baise {
 background-color: #FFFFFF;
}      
	</style> 
</head>
<body>
<div id="mask" class="mask"></div>  
	<div style="height: 50%">
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend align="center">修改个人密码</legend>
	</fieldset>
	<div align="center">	
		<form class="layui-form" action="">
		  
			<div class="layui-form-item" style="width: 45%">
			<label class="layui-form-label">您的密码 : </label>
			
			<div class="layui-input-inline" style="width: 45%">
				<input name="xpassword"  onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)" id="xpassword" placeholder="密码必须是字母和数字组成" class="layui-input" type="password"autocomplete="off" lay-verify="required|number">
			</div>
			<div class="layui-input-inline">
			<table width="70%" height="22" style='display:inline'>  
			<tr align="center">  
			<td width="33%" id="strength_L" style="font-size:18px;">弱&nbsp;&nbsp;</td>  
			<td width="33%" id="strength_M" style="font-size:18px;">中&nbsp;&nbsp;</td>  
			<td width="33%" id="strength_H" style="font-size:18px;">强&nbsp;&nbsp;</td>  
			</tr>  
			</table>  
			</div>
			</div>
		  <div class="layui-form-item" style="width: 45%">
		    <label class="layui-form-label">确认密码：</label>
		    <div class="layui-input-block">
		      <input name="qpassword" id="qpassword" lay-verify="title" autocomplete="off" placeholder="请再次输入新密码" class="layui-input" type="password">
		    </div>
		  </div>
		  <input id="submit" type="button" class="layui-btn layui-btn-primary" value="确认" >
		  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</form>
	</div>	
</div>
	<script type="text/javascript" src="../../layui/layui/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		function s(){     
        $("#mask").css("height",$(document).height());     
        $("#mask").css("width",$(document).width());     
        $("#mask").show();     
	    }  
	    //隐藏遮罩层  
	    function h(){     
	          
	        $("#mask").hide();     
	    }  
	</script>
	<script type="text/javascript" src="../../../layui/layui/layui.js"></script>
	<script>
		layui.use('element', function() {
			var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		});
		function CharMode(iN){  
if (iN>=48 && iN <=57) //数字  
return 1;  
if (iN>=65 && iN <=90) //大写  
return 2;  
if (iN>=97 && iN <=122) //小写  
return 4;  
else  
return 8;   
}  
//bitTotal函数  
//计算密码模式  
function bitTotal(num){  
modes=0;  
for (i=0;i<4;i++){  
if (num & 1) modes++;  
num>>>=1;  
}  
return modes;  
}  
//返回强度级别  
function checkStrong(sPW){  
if (sPW.length<=4)  
return 0; //密码太短  
Modes=0;  
for (i=0;i<sPW.length;i++){  
//密码模式  
Modes|=CharMode(sPW.charCodeAt(i));  
}  
return bitTotal(Modes);  
}  
//显示颜色  
function pwStrength(pwd){  
O_color="#eeeeee";  
L_color="#FF0000";  
M_color="#FF9900";  
H_color="#33CC00";  
if (pwd==null||pwd==''){  
Lcolor=Mcolor=Hcolor=O_color;  
}  
else{  
S_level=checkStrong(pwd);  
switch(S_level) {  
		case 0: 
		Lcolor=Mcolor=Hcolor=O_color;  
		case 1: 
		Lcolor=L_color;  
		Mcolor=Hcolor=O_color;  
		break;  
		case 2: 
		Lcolor=Mcolor=M_color;  
		Hcolor=O_color;  
		break;  
		default:  
		
		Lcolor=Mcolor=Hcolor=H_color;  
	}  
}  
document.getElementById("strength_L").style.background=Lcolor;  
document.getElementById("strength_M").style.background=Mcolor;  
document.getElementById("strength_H").style.background=Hcolor;  
return;  
}  
	</script>
	<script type="text/javascript" src="../../../layui/lay/modules/layer.js"></script>
	<script type="text/javascript" src="../../../layui/layer.ext.js"></script>
	<script type="text/javascript" src="../../../js/log.js"></script>
	<script>
	
		$("#submit").click(function(){
			function getPath() {  
	        return 'http://'+location.host;
			};
			var x=$("#xpassword").val();
			var q=$("#qpassword").val();
			if(x=="" || x==null){
				//layer.alert("新密码不能为空！");
				layer.alert('新密码不能为空！', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								     ,btn: ['确认'] //按钮
								      ,icon: 5    // icon
								     ,btn2:function(){
										
				}});
			}else if(x.length<6){
				//layer.alert("新密码不能为空！");
				layer.alert('密码不能小于6位！', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								     ,btn: ['确认'] //按钮
								      ,icon: 5    // icon
								     ,btn2:function(){
										
				}});
			}else if(!/([a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z])/.exec(x)){
				       layer.alert("密码输入错误，密码输由字符和数字组成！");
				       layer.alert('密码输入错误，密码输由字符和数字组成！', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								     ,btn: ['确认'] //按钮
								      ,icon: 5    // icon
								     ,btn2:function(){
								     }});
			}else if(q==null || q==""){
				//layer.alert("确认密码不能为空！");
				layer.alert('确认密码不能为空！', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								     ,btn: ['确认'] //按钮
								      ,icon: 5    // icon
								     ,btn2:function(){
										
				}});
			}else if(x!=q){
				//layer.alert("两次密码输入不一致");
				layer.alert('两次密码输入不一致！', {
								      skin: 'layui-layer-molv' //样式类名  自定义样式
								     ,closeBtn: 1    // 是否显示关闭按钮
								      ,anim: 1 //动画类型
								     ,btn: ['确认'] //按钮
								      ,icon: 5    // icon
								     ,btn2:function(){
										
				}});
			}else if(x==q){
			s();
					 $.ajax({
							url : getPath()+'/wsyyt/mimacontroller/text',
							method : 'post',
							dataType : 'JSON',
							data: {'xpassword':x},
							success : function(result) {
							h();
								var code = result.code;
								if(result.msg==null){
									layer.msg("登陆失效请重新登陆");
													setTimeout(function () {
														window.top.location.href=result.data;
													}, 1500);
													return;
								}
								else if(code==0){
										layer.alert('提示：修改成功', {
									      skin: 'layui-layer-molv' //样式类名  自定义样式
									     ,closeBtn: 1    // 是否显示关闭按钮
									      ,anim: 1 //动画类型
									     ,btn: ['确认'] //按钮
									      ,icon: 6    // icon
									     ,yes:function(){
											window.location.href=window.location.href;
										}});  
								}else{		
										layer.msg('提示：'+result.CW,{icon: 5});
										layer.alert('提示：'+result.CW, {
									      skin: 'layui-layer-molv' //样式类名  自定义样式
									     ,closeBtn: 1    // 是否显示关闭按钮
									      ,anim: 1 //动画类型
									     ,btn: ['确认'] //按钮
									      ,icon: 5    // icon
									     ,btn2:function(){
										
										}});
								}
							}
					});		 
			}
		});		
	</script>
</body>
</html>
